<template>
    <div>
        <MyHeader @receive="receive"></MyHeader>
        <MyList :todos="todos"></MyList>
        <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"></MyFooter>
    </div>
</template>

<script>
    // 后引入的css会覆盖掉先引入的css
    import MyHeader from "./components/MyHeader"
    import MyList from "./components/MyList"
    import MyFooter from "./components/MyFooter"
    export default {
        name:"App",
        components:{
            MyHeader,
            MyList,
            MyFooter,
        },
        data(){
            return{
                todos:JSON.parse(localStorage.getItem("todos")) || [],
            }
        },
        methods:{
            receive(todoObj){
                this.todos.unshift(todoObj)
            },
            updateCheckTodo(id){
                this.todos.forEach((todo) => {
                    if(todo.id === id){
                        todo.done = !todo.done
                    }
                })
            },
            deleteTodo(id){
                this.todos = this.todos.filter(todo => todo.id !== id)
            },
            checkAllTodo(done){
                this.todos.forEach((todo) => {
                    todo.done = done
                })
            },
            clearAllTodo(){
                this.todos = this.todos.filter(todo => !todo.done)
            },
        },
        watch:{
            // 简写形式无法检测数组的变化
            // todos(value){
            //     localStorage.setItem("todos",JSON.stringify(value))
            // },
            todos:{
                deep:true,
                handler(value){
                    localStorage.setItem("todos",JSON.stringify(value))
                }
            }
        },
        mounted() {
            this.$bus.$on('updateCheckTodo',this.updateCheckTodo)
            this.$bus.$on('deleteTodo',this.deleteTodo)
        },
        beforeDestroy() {
            this.$bus.$off('updateCheckTodo')
            this.$bus.$off('deleteTodo')
        },
    }
</script>
